<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

<ui:composition template="templates2/layout.xhtml">
<ui:param name="title" value="Online Banking System | Saving Account Management"></ui:param>
	<ui:define name="header">
		<ui:include src="templates2/header.xhtml">
			<ui:param name="current" value="Saving Account Management"></ui:param>
			<ui:param name="subtitle" value="Saving Account Management"></ui:param>
		</ui:include>
	</ui:define>
	<ui:define name="content">
		<h:form id="form" prependId="false">
			
			<article class="module width_full">
				<header>
					<h3>Search Account Information</h3>
				</header>
				<div class="module_content">
					<fieldset style="width: 48%; float: left; margin-right: 3%;">
						<label>Account Number </label><span style="color: red"><h:message
								for="accNum"></h:message></span>
						<h:inputText id="accNum"
							value="#{savingAccManagedBean.accountNumber}"
							converter="javax.faces.Long"
							converterMessage="Invalid account number" style="width: 92%;"
							validatorMessage="Account number must have 12 digits">
							<f:validateLength minimum="12" maximum="12"></f:validateLength>
						</h:inputText>
					</fieldset>
					<fieldset style="width: 48%; float: left;">
						<label>ID Card Number </label><span style="color: red"><h:message
								for="idNum"></h:message></span>
						<h:inputText id="idNum"
							value="#{savingAccManagedBean.idCardNumber}"
							converter="javax.faces.Long"
							converterMessage="Invalid ID card number" style="width: 92%;"
							validatorMessage="ID Card number must have 9 digits">
							<f:validateLength minimum="9"></f:validateLength>
						</h:inputText>
					</fieldset>

					<div class="submit_link">
						<h:commandButton value="Search"
							action="#{savingAccManagedBean.search}" />
						<h:commandButton value="Reset">
							<f:ajax render="form" listener="#{savingAccManagedBean.refresh}"></f:ajax>
						</h:commandButton>
					</div>
					<div class="clear"></div>
				</div>
			</article>
			<c:if test="${not empty savingAccManagedBean.cusAccounts}">
				<article class="module width_full">
					<header>
						<h3>Account list</h3>
					</header>
					<div class="module_content">
						<fieldset style="width: 100%;">
							<p:dataTable value="#{savingAccManagedBean.cusAccounts}" var="a"
								paginator="true" rows="2">
								<p:column>
									<f:facet name="header">Account Number</f:facet>
									#{a.accountNumber}
						</p:column>
								<p:column>
									<f:facet name="header">Current Balance</f:facet>
									<h:outputText value="#{a.accountBalance}"><f:convertNumber pattern="#,###,##0.00" /></h:outputText>
						</p:column>
								<p:column>
									<f:facet name="header">Created Date</f:facet>
									<h:outputText value="#{a.createdDate}">
									<f:convertDateTime pattern="hh:mm:ss dd-MM-yy"></f:convertDateTime>
								</h:outputText>
							
						</p:column>
								<p:column>
									<f:facet name="header">State</f:facet>
									#{a.accountState}
						</p:column>
								<p:column>
									<f:facet name="header">Action</f:facet>
									<p:commandLink action="#{savingAccManagedBean.selectAccount}" ajax="false"  rendered="#{a.accountState eq 'ACTIVE'}">
										<h:outputText value="Details" />
										<f:setPropertyActionListener target="#{savingAccManagedBean.selectedAccount}" value="#{a}"/>
									</p:commandLink>
								</p:column>
							</p:dataTable>
						</fieldset>
					</div>
				</article>
			</c:if>
			<c:if test="${not empty savingAccManagedBean.customer}">
				<article class="module width_full">
					<header>
						<h3>Account owner information</h3>
					</header>
					<div class="module_content">
						<fieldset style="width: 48%; float: left; margin-right: 3%;">
							<label>Customer ID</label>#{savingAccManagedBean.customer.customerID}
						</fieldset>
						<fieldset style="width: 48%; float: left;">
							<label>ID Card Number</label>#{savingAccManagedBean.customer.idCardNumber}
						</fieldset>
						<fieldset style="width: 32%; float: left; margin-right: 1.5%;">
							<label>First name</label>#{savingAccManagedBean.customer.firstName}
						</fieldset>
						<fieldset style="width: 32%; float: left; margin-right: 1.5%;">
							<label>Middle name</label>#{savingAccManagedBean.customer.midName}
						</fieldset>
						<fieldset style="width: 32%; float: left;">
							<label>Last name</label>#{savingAccManagedBean.customer.lastName}
						</fieldset>
						<fieldset style="width: 48%; float: left; margin-right: 3%;">
							<label>Address 1</label>#{savingAccManagedBean.customer.address}
						</fieldset>
						<fieldset style="width: 48%; float: left;">
							<label>Address 2</label>#{savingAccManagedBean.customer.address2}
						</fieldset>
						<fieldset style="width: 48%; float: left; margin-right: 3%;">
							<label>Email 1</label>#{savingAccManagedBean.customer.email}
						</fieldset>
						<fieldset style="width: 48%; float: left;">
							<label>Email 2</label>#{savingAccManagedBean.customer.email2}
						</fieldset>
						<fieldset style="width: 48%; float: left; margin-right: 3%;">
							<label>Phone 1</label>#{savingAccManagedBean.customer.phoneNumber}
						</fieldset>
						<fieldset style="width: 48%; float: left;">
							<label>Phone 2</label>#{savingAccManagedBean.customer.phoneNumber2}
						</fieldset>
						<div class="clear"></div>
					</div>
				</article>
			</c:if>
		</h:form>
	</ui:define>
</ui:composition>
</html>